<template>
  <div class="onlineFilingXw">
    <div class="topBg" @click="$router.push('/user')">
      <van-nav-bar title="授权管理" left-arrow />
    </div>
    <div class="content">
      <div class="uploadBox">
        <van-form>
          <van-field name="radio" label="授权人类型">
            <template #input>
              <van-radio-group v-model="uploadForm.radio" direction="horizontal">
                <van-radio name="1">法定代表</van-radio>
                <van-radio name="2">被授权人</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label-width="4.5rem" name="uploader" label="上传授权证书附件">
            <template #extra>
              <div class="download">
                <van-icon name="link-o" />下载模版
              </div>
            </template>
          </van-field>
          <van-uploader v-if="!fileInfo.name" accept="" :max-count="1" v-model="uploadForm.uploader"
            :after-read="afterRead">
            <span class="uploadBg">
              <img src="@/assets/upload.png" alt="">
            </span>
          </van-uploader>
          <div v-if="fileInfo" class="fileInfo">{{ fileInfo.name }}</div>
          <div class="tip">
            请严格技照授权书模版填写相关内容，并加盖公司公章，图片完整清晰、字段无遮挡。授权书需盖单位公章方可有效，上传文件支持jpg/png格式，暂不支持手写体字符识别，若提交手写版授权书，需进行人工审核。
          </div>
        </van-form>
      </div>
      <div class="formQuery">
        <van-form>
          <van-field v-model="enterpriseForm.name" name="开户人手机号" label="开户人手机号" placeholder="请输入" @blur="getInfo" />
          <van-field v-model="enterpriseForm.username" name="开户人姓名" label="开户人姓名" placeholder="请输入" />
          <van-field v-model="enterpriseForm.code" name="开户人身份证" label="开户人身份证" placeholder="请输入" />
          <van-field v-model="enterpriseForm.phone" class="phone" name="验证方式" label="验证方式" placeholder="请输入">
            <template #extra>
              <p class="phoneExtra">
                <img src="@/assets/images/img1.png" alt="">
                <van-button round block type="info" @click="startVerification">开始验证</van-button>
              </p>
            </template>
          </van-field>
          <van-field v-model="enterpriseForm.detailAddress" class="detailAddress" name="验证结果" label="验证结果"
            placeholder="请输入">
            <template #extra>
              <p><van-icon style="margin-right: .1rem;" name="underway-o" />{{ status === 0 ? '待验证' : '验证成功' }}</p>
            </template>
          </van-field>
        </van-form>
      </div>
      <div class="btns">
        <van-button round block type="default">取消</van-button>
        <van-button round block type="info" @click="handleSubmit">提交</van-button>
      </div>
    </div>
    <div class="pop1" v-if="popShow">
      <div>
        <img v-show="imgShow01" @click="clickrlsb()" src="@/assets/images/invoice/auth01.png" alt="">
        <img v-show="imgShow02" src="@/assets/images/invoice/auth02.png" alt="">
      </div>
    </div>
  </div>
</template>
  <script>
  import zjz1 from '@/assets/zjz1.png'
  export default {
    name: 'authManage',
    data() {
      return {
        backGround: [
          require('@/assets/images/invoice/auth01.png'),
          require('@/assets/images/invoice/auth02.png'),
        ],
        popShow:false,
        imgShow01: true,
        imgShow02:false,
        fileInfo: {},
        uploadForm: {
          uploader: [],
          radio: '2'
        },
        enterpriseForm: {},
        status: 0
      }
    },
    mounted() {
      this.backGround.forEach(item => {
        const div = document.createElement('div')
        div.style.backgroundImage = `url(${item})`
        div.style.width = '0'
        div.style.height = '0'
        document.body.appendChild(div)
      }) 
    },
    methods: {
      
      afterRead(file) {
        this.fileInfo.name = "授权证书.docx"
      },
      handleSubmit() {
        this.$toast.success('建档资料已提交');
        this.$router.push('/user')
      },
      getInfo() {
        console.log("34234")
        this.enterpriseForm.username = "张三"
        this.enterpriseForm.code = "123513234124124"
      },
      startVerification() {
        this.popShow = true
        // this.status = 1;
        // this.$toast.success("验证成功")
      },
      clickrlsb() {
        this.imgShow01 = false
        this.imgShow02 = true

        setTimeout(() => {
          this.popShow = false
          this.status = 1;

          this.imgShow01 = true
          this.imgShow02 = false
        },2000)
      }
    },
  }
  </script>
  
  <style lang="less" scoped>
  .onlineFilingXw {
    overflow: auto;
  }

  .content {
    width: 100%;
    position: absolute;
    top: .98rem;

    .uploadBox {
      width: 7.1rem;
      border-radius: 0.3rem;
      background: #FFFFFF;
      padding: .24rem 0;
      margin-left: .2rem;

      .van-uploader {
        width: 100%;

        /deep/.van-uploader__wrapper {
          justify-content: center;

          .van-image {
            width: 4.2rem;
            height: auto;

            .van-image__img {
              width: 4.2rem;
            }
          }
        }

        .uploadBg {
          margin-top: .1rem;

          img {
            width: 4.2rem;
          }
        }
      }

      .tip {
        padding: 0 .3rem;
        font-weight: normal;
        font-size: 0.22rem;
        color: #999999;
        line-height: 0.34rem;
        text-align: justify;
        font-style: normal;
      }
    }

    .formQuery {
      margin-top: .2rem;
      width: 7.1rem;
      padding: .24rem 0;
      background: #FFFFFF;
      border-radius: 0.3rem;
      margin-left: .2rem;
    }

    .btns {
      background: #fff;
      margin-top: .2rem;
      width: 100%;
      height: 1.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 .2rem;

      button {
        width: 3.14rem;
        height: .72rem;
        border-radius: 0.2rem;
        font-size: 0.32rem;

        &:first-child {
          background: #E9F4FF;
          color: #2892FF;
          border: 0 !important;
        }
      }
    }

  }

  .fileInfo {
    font-size: 0.3rem;
    color: #2892FF;
    padding: .2rem;
    text-align: center;
  }

  .download {
    width: 1.7rem;
    height: 0.32rem;
    font-size: 0.28rem;
    color: #2892FF;
    line-height: 0.32rem;
    text-align: left;
    font-style: normal;
  }

  .detailAddress,
  .phone {
    /deep/ .van-field__value {
      display: none;
    }
  }

  .phoneExtra {
    img {
      width: 3.96rem;
    }

    button {
      width: 2rem;
      height: 0.6rem;
      border-radius: 0.1rem;
      background: #E9F4FF;
      color: #2892FF;
    }
  }

  .pop1 {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #F7F8F9;
    z-index: 99;
    div{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
      }
    }
  }
</style>